/**
 * @format
 */
import {name as appName} from './app.json';
import React, {Component} from 'react';
import App from './App';
import {AppRegistry, StyleSheet, View, ScrollView, Text} from 'react-native';

import Main from './src/components/Main';
import {height} from 'deprecated-react-native-prop-types/DeprecatedImagePropType';
import Login from './Login';

export default class loginAnimation extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Main />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#F5FCFF',
  },
});

const FlexDimensionsBasics = () => {
  return (
    // 试试去掉父View中的`flex: 1`。
    // 则父View不再具有尺寸，因此子组件也无法再撑开。
    // 然后再用`height: 300`来代替父View的`flex: 1`试试看？

    <ScrollView stype={{height: '100%'}}>
      <View stype={{height: 150}}>
        <Text>logo</Text>
      </View>
      <View>
        <View style={{flex: 1, backgroundColor: 'powderblue'}} />
        <View style={{flex: 2, backgroundColor: 'skyblue'}} />
        <View style={{flex: 3, backgroundColor: 'steelblue'}}>
          <View>
            <View
              style={{width: 50, height: 50, backgroundColor: 'powderblue'}}
            />
            <View
              style={{width: 100, height: 100, backgroundColor: 'skyblue'}}
            />
            <View
              style={{width: 150, height: 150, backgroundColor: 'powderblue'}}
            />
          </View>
        </View>

        <View
          style={{
            width: '100%',
            backgroundColor: 'white',
            borderColor: 'gray',
            borderBottomWidth: 2,
            marginTop: 1,
            marginBottom: 1,
          }}
        />
        <View style={{flex: 3, backgroundColor: 'steelblue'}}>
          <View>
            <View
              style={{width: 50, height: 50, backgroundColor: 'powderblue'}}
            />
            <View
              style={{width: 100, height: 100, backgroundColor: 'skyblue'}}
            />
            <View
              style={{width: 150, height: 150, backgroundColor: 'powderblue'}}
            />
          </View>
        </View>
        <View
          style={{
            width: '100%',
            backgroundColor: 'white',
            borderColor: 'gray',
            borderBottomWidth: 2,
            marginTop: 1,
            marginBottom: 1,
          }}
        />
        <View style={{flex: 3, backgroundColor: 'steelblue'}}>
          <View>
            <View
              style={{width: 50, height: 50, backgroundColor: 'powderblue'}}
            />
            <View
              style={{width: 100, height: 100, backgroundColor: 'skyblue'}}
            />
            <View
              style={{width: 150, height: 150, backgroundColor: 'powderblue'}}
            />
          </View>
        </View>
        <View
          style={{
            width: '100%',
            backgroundColor: 'white',
            borderColor: 'gray',
            borderBottomWidth: 2,
            marginTop: 1,
            marginBottom: 1,
          }}
        />
      </View>
    </ScrollView>
  );
};

AppRegistry.registerComponent(appName, () => Login);
